<template>
  <div class="app-page">
    <!-- 搜索 -->
    <div class="app-search-form-container">
      <div class="app-tools">
        <a-button type="primary">
          添加按钮
        </a-button>
      </div>
      <div class="app-search-form">
        <a-form layout="inline">
          <a-form-item label="关键字">
            <a-input
              v-model="searchForm.name1"
              allow-clear
              placeholder="手机号、姓名"
              style="width:200px; margin-right: 10px;"
            />
          </a-form-item>
          <a-form-item label="选择门店">
            <a-select v-model="searchForm.name2" style="width: 220px">
              <a-select-option value="">
                全部
              </a-select-option>
              <a-select-option
                v-for="(item, index) in mockSelectList"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              class="margin-right-20"
              @click="query(searchForm)"
            >
              搜索
            </a-button>
            <a-button type="default" @click="resetForm({})">
              重置
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <!-- 表格 -->
    <div class="app-main-container">
      <div class="app-table-container">
        <a-table
          bordered
          :columns="columns"
          :row-selection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange
          }"
          :loading="tableLoading"
          :data-source="tableData"
          :pagination="false"
          :row-key="row => row.id"
        >
          <span slot="status" slot-scope="status">
            <template v-if="status === 1">正常</template>
            <template v-else>禁用</template>
          </span>
          <span slot="action" slot-scope="text, record">
            <a-button
              type="link"
              size="small"
              @click="editRowHandle(record.id)"
            >
              编辑
            </a-button>
            <a-popconfirm
              title="确定要删除此商品吗?"
              @confirm="() => delRowHandle(record.id)"
            >
              <a-button type="link" size="small" style="color:red">
                删除
              </a-button>
            </a-popconfirm>
          </span>
        </a-table>
      </div>
      <div class="app-pagination">
        <a-pagination
          show-quick-jumper
          show-size-changer
          :current="currentPage"
          :total="total"
          :page-size="pageSize"
          :page-size-options="pageSizeOptions"
          @change="onPageChange"
          @showSizeChange="onSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import tableSearchPaginationMixin from '@/mixins/tableSearchPagination'
import { remove, getData } from '@/mock/index'
const columns = [
  {
    title: '门店',
    dataIndex: 'field01',
    key: 'field01',
    align: 'center',
    scopedSlots: { customRender: 'title2' }
  },
  {
    title: '地址',
    dataIndex: 'field02',
    key: 'field02',
    align: 'center',
    scopedSlots: { customRender: 'field02' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 300,
    key: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'MultitableSearchPagination',
  mixins: [tableSearchPaginationMixin],
  data() {
    return {
      // 选择
      selectedRowKeys: [],
      columns,
      // 表格loading
      tableLoading: false,
      // 表格数据
      tableData: []
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    // 复选
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    // 获取列表
    async getTableData(form = this.searchFormTemp) {
      // 模拟表格数据
      const tableData = {
        currentPage: 1,
        records: [
          {
            field01: '项目A',
            field02: '',
            field03: '2019-3-12',
            field04: '论证阶段',
            field05: '210000',
            field06: '',
            id: 1
          }
        ],
        total: 1
      }
      this.tableLoading = true
      const res = await getData(
        {
          current_page: this.currentPage,
          page_number: this.pageSize,
          ...form
        },
        tableData
      )
      this.tableLoading = false
      if (res.code === 1) {
        const { current_page, total, records } = res.data
        this.currentPage = current_page
        this.total = total
        this.tableData = records
      }
    },
    // 编辑
    async editRowHandle(id) {
      const res = await getData({ id })
      if (res.code === 1) {
        console.log('编辑')
        // this.dialogVisible = true
        // this.isEdit = true
        // this.detailData = res.data
      } else {
        this.$notification.error({
          message: '获取编辑信息失败!'
        })
      }
    },
    // 删除
    async delRowHandle(id) {
      const res = await remove({ userUuid: id })
      if (res.code === 1) {
        this.$notification.success({
          message: '删除成功!',
          duration: 1
        })
        // 更新表格
        this.getTableData()
      }
    }
  }
}
</script>
<style lang="less" scoped></style>
